import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Second from './pages/second/Second';
import React from 'react';
import App from './pages/app/App';
import HocPage from './pages/hoc/HocPage';
import MemoCallback from "./pages/memo_callback/MemoCallback";

// 跨组件共享数据
export const GlobalContext = React.createContext<string>('全局SecondContext');

// 定义路由
const BasicRoute = () => {
    return (
        <BrowserRouter>
            <Switch>
                {/*表示首页路由*/}
                <Route
                    exact
                    path={'/'}
                    render={routerProps => {
                        return <App textColor={'red'} {...routerProps} />;
                    }}
                />
                {/*表示二级页面路由*/}
                <Route
                    exact
                    path={'/second'}
                    render={routerProps => {
                        return (
                            <GlobalContext.Provider value={'全局SecondContext'}>
                                <Second {...routerProps} />
                            </GlobalContext.Provider>
                        );
                    }}
                />
                {/*hoc案例页面*/}
                <Route
                    exact
                    path={'/hocPage'}
                    render={routerProps => {
                        return <HocPage {...routerProps} />;
                    }}
                />
                <Route
                    exact
                    path={'/memoCallback'}
                    render={routerProps => {
                        return <MemoCallback {...routerProps} />;
                    }}
                />
                )
            </Switch>
        </BrowserRouter>
    );
};

export default BasicRoute;
